<template>
  <q-select
    dense
    outlined
    options-dense
    :options="catalogArr"
    v-model="myCatalog"
    options-selected-class="teal"
  />
</template>

<script lang="ts">
import { defineComponent, PropType, toRefs, computed } from 'vue';
import { cataItem } from 'src/hook/common/useCatalogType';


export default defineComponent({
  name: 'CatalogInput',
  props: {
    catalogArr: {
      type: Array as PropType<cataItem[]>,
      default: () => {
        return [];
      }
    },
    modelValue: {
      type: Object as PropType<cataItem>,
      default: () => {
        return {}
      }
    }
  },
  emits: ['update:modelValue'],
  setup (props, context) {
    // 解构props，简单类型，只读类型
    let {
      catalogArr
    } = toRefs(props);

    //动态响应数据
    let myCatalog = computed({
      get: () => {
        return props.modelValue;
      },
      set: (cata) => {
        context.emit('update:modelValue', cata);
      }
    });

    return {
      catalogArr,
      myCatalog
    };
  }
});

</script>

<style lang="scss" scoped>

</style>
